<template>
    <div class="box">
        <el-button @click="add">+</el-button>
        <div v-for="(item,i) in userList" :key="i">
            <p>用户</p>

            <el-input v-model="item.username" @blur="checkuser(item)"></el-input>
            <span v-if="item.isCheck">已重复</span>
            <p>昵称</p>
            <el-input v-model="item.nickname"></el-input>
              <el-select v-model="item.type" placeholder="请选择">
                  
                <el-option
                label="超级管理员"
                :value="0">
                </el-option>
                <el-option
             
                label="普通管理员"
                :value="1">
                </el-option>
            </el-select>
        </div>
        <el-button @click="addList">确认提交</el-button>
        <el-button @click="clear">取消</el-button>
        
    </div>
</template>
<script>
import{addUserList,checkUser} from "@/api/user"
const user={
    username:"",
    nickname:"",
    type:1,
    isCheck:false,
    password:"admin123"
}
export default {
    props:["onChangeVisible","onGetUserList"],
    data() {
        return {
            userList:[{...user}]
        }
    },
    methods: {
        checkuser(item){
            checkUser({username:item.username}).then(res=>{
                item.isCheck = res.data.length==1
            })
        },
        add(){
            this.userList.push({...user})
        },
        clear(){
            this.onChangeVisible()
            this.userList=[{...user}]
        },
        addList(){
            let flag = true;
            for(var k of this.userList){
                if(k.isCheck){
                    flag=false;
                }
            }
            if(flag){
                addUserList(this.userList).then(res=>{
                if(res.code==200){
                    alert("添加成功")
                    this.clear()
                    this.onGetUserList()
                }
                else{
                    alert("添加失败")
                }
            })
            }
            
        }
    },
}
</script>
<style lang="scss" scoped>
    .box{
        >div{
            display: flex;
            padding:10px;
        }
        
    }
</style>
<style scoped>
  
  .el-input{
    width: 200px;
    margin: 0 20px;
  }
  p{
      width: 40px;
      line-height: 40px;
  }
  .el-button:nth-of-type(1){
      margin-left: 700px;
  }
  .el-button:nth-of-type(2){
      margin-left: 260px;
  }
  .box>div{
      display: flex;
      padding: 10px;
  }
</style>